<template>
  <div class="nav_outer">
    <header id="header" class="yui-bar">
        <div>消息中心</div>
    </header>
    <div class="content" v-show="messages.length">
        <div class="messages">
            <div :class="{'message':true,'new':!item.status}" v-for="(item,index) in messages" v-bind:key="item.id" :data-index="index">【{{ item.name }}】{{ item.content }}</div>
            <div class="refresh"></div>
        </div>
    </div>
    <div class="palceholder"></div>
  </div>
</template>

<script>
import BottomTab from '@/components/commonComponents/BottomTab'
export default {
  data() {
    return {
      pullre: null,
      pageNum: 1,
      pageSize: 10,
      loading: false,
      totalPage: 1,
      messages:[]
    }
  },
  created(){
    this.loadMessages();
    let that = this;
    setTimeout(function(){
      that.$store.commit('SETNEWS', false);
    },2000);
    
  },
  mounted() {
    let mui = this.mui,that = this;
    this.interactive.reachBottomLoad({
     callback: function(){
       if(that.loading){
          return;
      }
      that.pageNum+=1;
      that.loadMessages();
    }})
    mui(".messages").on("tap", ".message", function() {
        var index = this.getAttribute("data-index");
        var detail = that.messages[index];
         mui.alert(detail.content,detail.title);
      });
  },
  methods: {
    setunix(){
      let obj = this.messages[0] && this.messages[0].createDate;
      if(obj){
        let unix = new Date(obj.replace(/-/g,'/')).getTime();
        localStorage.setItem('messunix',unix);
      }
    },
    loadMessages(){
      let that = this;
      if (this.pageNum > this.totalPage || this.loading) {
        return;
      }
      that.loading = true;
      that.Http2.get("/mobile/notice/page", {
        current: that.pageNum,
        size: that.pageSize,
        receiver: localStorage.getItem('uid')
      }).then(
        res => {
          if(that.pageNum==1){
            that.messages = res.object;
            that.setunix();
          }else{
            that.messages = that.messages.concat(res.object);
          }
          that.totalPage = res.totalPage || 1;
          that.loading = false;
        },
        () => {
          that.loading = false;
        }
      );
    }
  },
  components: {
  }
}
</script>

<style lang='scss' scoped>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  .content{
      padding: px2em(30);
      background: #fff;
      .message{
          margin: px2em(50) 0;
          position: relative;
          &.new:after{
              position: absolute;
              content: '';
              display: block;
              width: 5px;
              height: 5px;
              border-radius: 50%;
              background: red;
              right: 10px;
              top: 38%;
          }
      }
  }
</style>